<template>
	<scroll-view :class="pageClass" :style="pageStyle" v-if="pageReady" :scroll-y="true" @scrolltolower="scrolltolower">
		<moxi-nav :set="navSet"></moxi-nav>
		<view style="background: #F5F5F5;display: flex;flex-direction: column;height: 100%;">
			<!-- 顶部选项卡 -->
			<view class="order-tab">
				<u-tabs :list="tabsList" :current="currentTab" @change="tabsClick" :lineColor="colorList[4]"></u-tabs>
			</view>
			
			
			<view
				:style="{<!-- #ifdef MP-BAIDU || MP-TOUTIAO -->'margin-bottom': '80px'<!-- #endif --><!-- #ifndef MP-BAIDU || MP-TOUTIAO -->'margin-bottom': '60px'<!-- #endif -->}"
				style="padding:0 12px;overflow: auto ;">
			
				<view v-if="data['tab_'+currentTab].data.length === 0"
					style="text-align: center;padding: 100rpx;display: flex;align-items: center;flex-direction: column;gap: 20px;">
					<view>
						<u--image src="https://file.moxikeji.net/images/2025/nullorder.png" width="200px"
							height="200px"></u--image>
					</view>
					<text>暂无订单</text>
					<view style="width: 100px;height: 40px;">
						<u-button :custom-style="{height: '100%', width: '100%',BorderRadius: '20px'}" plain
							:color="colorList[4]" @click="goToPlaceAnOrder">去下单</u-button>
					</view>
				</view>
				<view >
					<view  class="order-box" v-for="(item,allDataIndex) in data['tab_'+currentTab].data" >
						<view class="order-information">
							<view style="color: #3D3D3D;">
								订单编号：
								<span style="font-size: 10px;color: #999999;">{{item.order_id}}</span>
							</view>
							<!-- order_type //0 待取餐  1  已完成 status  //0待支付，1是支付完成，-1取消订单,   -->
							<view style="color: #E73833;font-weight: bold;" v-if="item.status === 0  && item.cancelStatus === 0 ">
								待支付
							</view>
							<!-- <view style="font-size: 10px;color: #999999;" v-if="item.status === 'obligation'">
								预计取餐时间{{item.orderTime}}
							</view> -->
							<view v-if="item.order_type === 0 && item.status === 1" style="color: #3D3D3D;font-weight: bold;">
								待取餐
							</view>
							<view style="font-size: 10px;color: #999999;" v-if="item.code && item.status === 1">
								取餐号：{{item.code}}
							</view>
							<view style="font-size: 10px;color: #999999;" v-if="item.order_type === 1">
								已完成
							</view>
							<view style="font-size: 10px;color: #999999;" v-if="item.cancelStatus">
								已取消
							</view>
						</view>

						<view v-for="(item2,index) in JSON.parse(item.info)">
							
							<view style="display: flex;gap:12px;">
								<view style="width: 80px;height: 80px;">
									<image :src="item2.img" style="width: 100%; height: 100%;border-radius: 10px;">
									</image>
								</view>
								<view class="set-meal">
									<view style="color: #3D3D3D;font-weight: bold;">{{item2.name}}</view>
									<view v-for="(item3) in item2.specs">
										<view style="font-size: 10px;color: #999999;">{{item3.groupName}}：{{item3.name}}</view>
									
									</view>
									<view style="font-weight: bold">￥{{item2.price}}</view>
								</view>
								<view class="dish-sum">x{{item2.count}}</view>
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view style="font-size: 10px;color: #999999;">共计{{item.num}}件商品</view>
							<view style="font-size: 14px;" v-if="item.cancelStatus === 0">
								<text v-if="item.status === 1"
									style="color: #3D3D3D;font-weight: bold;">实付款:</text>
								<text v-else
									style="color: #3D3D3D;font-weight: bold;">待付款:</text>
								<span style="color: #E73833;">￥{{item.all_price}}</span>
							</view>
						</view>

						<view style="display: flex;justify-content: flex-end;gap: 8px;">
							<!-- 待支付显示 -->
							<view v-if="item.status === 0 && item.cancelStatus === 0"
								style="display: flex;justify-content: flex-end;gap: 8px;">
								<view style="width: 84px;height: 28px;">
									<u-button v-if="cancel" plain
										:custom-style="{height: '100%', width: '100%',color:'#999999',borderRadius: '4px',border:'1px solid'}"
										@click="cancelOrder(item.id,allDataIndex)">取消订单</u-button>
								</view>
								<!-- <view style="display: flex;">
									<u-button plain class="order-revise" :color="colorList[4]"
										:style="'border-color:' + colorList[4]">修改订单</u-button>
								</view> -->
								<view style="width: 84px;height: 28px;">
									<u-button :custom-style="{height: '100%', width: '100%',borderRadius: '4px'}"
										:color="colorList[4]" @click="payNow(item.mid,item.tid,item.info,item.desc,item.packback,item.order_id)">立即付款</u-button>
								</view>
							</view>
							<!-- 待取餐显示 -->
							<view v-if="item.order_type === 0 && item.status === 1"
								style="display: flex;justify-content: flex-end;gap: 8px;">
								<view style="width: 84px;height: 28px;">
									<u-button v-if="item.order_type === 0"
										:custom-style="{height: '100%', width: '100%',color:'green',borderRadius: '4px',border:'1px solid'}" @click="takeP(item.order_id,allDataIndex)">我已取餐</u-button>
								</view>
								<view style="width: 84px;height: 28px;">
									<u-button :custom-style="{height: '100%', width: '100%',borderRadius: '4px'}"
										:color="colorList[4]" @click="openOrder(item.order_id,item.mid)">查看订单</u-button>
								</view>
							</view>
							<!-- 已取消显示 -->
							<view v-if="item.cancelStatus === 1"
								style="display: flex;justify-content: flex-end;gap: 8px;">
			
								<u-button
									:custom-style="{height: '100%', width: '100%',color:'#999999',borderRadius: '4px',border:'1px solid'}"
									@click="delOrder(item.id,allDataIndex)">删除订单</u-button>
							</view>
							<!-- 已完成后 -->
							<view v-if="item.order_type === 1 && item.status === 1 && item.cancelStatus === 0"
								style="display: flex;justify-content: flex-end;gap: 4px;">
								<view style="width: 84px;height: 28px;">
									<u-button
										:custom-style="{height: '100%', width: '100%',color:'#999999',borderRadius: '4px',border:'1px solid'}"
										@click="delOrder(item.id,allDataIndex)">删除订单</u-button>
								</view>
								<view v-if="item.isDel == 0 && (item.content == '' || item.content == []) " style="width: 84px;height: 28px;">
									<u-button plain :color="colorList[4]"
										:custom-style="{height: '100%', width: '100%',borderRadius: '4px'}"
										@click="rateTheOrderClick(item.order_id)">评价订单</u-button>
								</view>
								<view style="width: 84px;height: 28px;">
									<u-button plain :color="colorList[4]"
										:custom-style="{height: '100%', width: '100%',borderRadius: '4px'}"
										@click="openOrder(item.order_id,item.mid)">查看订单</u-button>
								</view>
								<view style="width: 84px;height: 28px;">
									<u-button :custom-style="{height: '100%', width: '100%',borderRadius: '4px'}"
										:color="colorList[4]" @click="another()">再次购买</u-button>
								</view>
							</view>
						</view>
					</view>
					<!-- #ifndef MP-BAIDU || MP-TOUTIAO -->
					<u-divider text="已经到底了" :hairline="true" ></u-divider>
					<!-- #endif -->

					<!-- #ifdef MP-BAIDU || MP-TOUTIAO -->
					<view style="display: flex; align-items: center; margin: 30rpx 0;">
						<view style="flex: 1; height: 1px; background-color: #eee;"></view>
						<view style="padding: 0 20rpx; color: #999; font-size: 24rpx;">已经到底了</view>
						<view style="flex: 1; height: 1px; background-color: #eee;"></view>
					</view>
					<!-- #endif -->

				</view>

			</view>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</scroll-view>
</template>

<script>
import { onLoad,onShow } from '../uni_modules/uview-ui/libs/mixin/mixin';

	export default {
		data() {
			return {
				data:{
					tab_0:{
						data:[],
						page:1,
						page_num:5,
						hasMore:true,
						isGet:false
					},
					tab_1:{
						data:[],
						page:1,
						page_num:5,
						hasMore:true,
						isGet:false
					},
					tab_2:{
						data:[],
						page:1,
						page_num:5,
						hasMore:true,
						isGet:false
					},
					tab_3:{
						data:[],
						page:1,
						page_num:5,
						hasMore:true,
						isGet:false
					},
				},
				currentTab: 0, //0是全部，1是待支付，2待取餐。3是已完成 
				src: '/orderimgdata/nullorder.png',
				tabsList: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待取餐'
				}, {
					name: '已完成'
				}],
				cancel:true,
				orderData:{
					
				},
				page:1,
				page_num:5,
			}
		},
		onLoad(){
			this.get(0,1)
		},
		onShow(){
			this.get(0,1)
		},
		methods: {
			scrolltolower(e){
				const tabKey = 'tab_'+this.currentTab;
				if(this.data[tabKey].hasMore){
					this.get(this.currentTab,this.data[tabKey].page+1)
				}
			},
			//我已取餐
			takeP(orderid,key){
				this.showConfirmDialog('您确认取到餐了吗？', () => {
					this.moxiPost('/plugin/order/user/user/takefood',{'orderid':orderid},(res)=>{
						this.data['tab_'+this.currentTab].data[key].order_type = 1
						this.msg(res.hint)
						this.newView(this.data['tab_'+this.currentTab].data[key].id,{order_type:1})
						this.get(3,1)
					})
					
				});
			},
			
			//渲染更新
			newView(id,object){
				for(let i = 0;i < 4;i++){
					//更新所有选项卡数据
					this.data['tab_'+i].data = [];
					this.data['tab_'+i].hasMore = true;
					this.data['tab_'+i].isGet = false;
					this.data['tab_'+i].page = 1;
					this.get(this.currentTab,1)
					}
				
			},
			get(tab,page){
				const tabKey = 'tab_'+tab;
				if(page){
					this.data[tabKey].page = page;
				}
				const orderUrl = '/plugin/order/user/user/getmyorder';
				
				let param = {
					page:this.data[tabKey].page,
					page_num:this.data[tabKey].page_num
				}
				if(tab == 1){
					param.status = 0;
				}else if(tab==2){
					param.status = 1;
					param.order_type = 0;
				}else if(tab==3){
					param.order_type = 1;
					param.status = 1;
				}
				
				this.moxiPost(orderUrl,param,(res)=>{
					console.log('这是所有订单:',res.data);
					for(let k in res.data.data){
						this.data[tabKey].data.push(res.data.data[k])
					}
					if(res.data.allpage > param.page){
						this.data[tabKey].hasMore = true
					}else{
						this.data[tabKey].hasMore = false
					}
					if(this.data[tabKey].isGet === false){//首次获取时
						this.data[tabKey].isGet = true;
					}
					
				})
			},
			//选项卡切换
			tabsClick(index) {
				this.currentTab = index.index;
				const tabKey = 'tab_'+this.currentTab;
				if(!this.data[tabKey].isGet){
					this.get(this.currentTab);
				}
				
			},
			//查看订单
			openOrder(orderid,mid) {
					this.navto('plugin_order/orderinfo?order_id='+orderid + '&mid=' + mid)
			},
			//再来一单
			another(){
				const selectedData = uni.getStorageSync('plugin_order_selectedGoods');
				//解码
				const dd = selectedData;
				// return false;
				//组装需要的数据
				const mid = uni.getStorageSync('selected')
				//要区分h5 uniapp
				// #ifdef MP-ALIPAY || MP-WEIXIN
					uni.navigateTo({
						url: '/plugin_order/orderconfirm?mid='+ mid
					});
				// #endif
				// #ifndef MP-ALIPAY || MP-WEIXIN
					uni.navigateTo({
						url: '/plugin_order/orderconfirm?mid='+ mid
					});
				// #endif
				
			},
			payNow(mid,tid,info,desc,packback,order_id){
				console.log(mid,'tid:',tid,'goods:','info',info,desc,packback,order_id)
				//只有已完成的才能再次
				const tabKey = 'tab_'+this.currentTab;
				// console.log(JSON.parse(this.allDataList[0].info));
				this.moxiPost('/plugin/order/user/user/paynow',
				{
					'order_id':order_id,
					'mid':mid,
					'goods':JSON.parse(info),
					'tid':tid??0,
					'desc':desc,
					'packback':packback
				},
				(res)=>{
					console.log('thisdata:',res.data);
					this.navto("/pages/index/pay?pay_id="+res.pay_id+"&btn_name=查看订单&path="+encodeURIComponent("/plugin_order/orderinfo?order_id="+res.data.order_id + '&mid=' + mid))
				})
			},
			//打分评价
			rateTheOrderClick(orderid) {
				uni.navigateTo({
					url: '/plugin_order/evaorder?orderid='+orderid
				});
			},
			goToPlaceAnOrder() {
				uni.navigateTo({
					url: '/plugin_order/merchant'
				});
			},
			delOrder(id,key) {
				this.showConfirmDialog('确定要删除此订单吗？', () => {
					this.moxiPost(
					'/plugin/order/user/user/delorder',{'id':id},(res)=>{
						console.log(this.data['tab_'+this.currentTab].data[key])
					this.data['tab_'+this.currentTab].data[key].order_type = 2
					this.data['tab_'+this.currentTab].data.splice(key,1)
					this.msg(res.hint);
					}
					);
					
				});
			},
			cancelOrder(id,key) {
				
				this.showConfirmDialog('确定要取消此订单吗？', () => {
					//找到指定订单 
					this.moxiPost('/plugin/order/user/user/cancelorder',{'id':id},(res)=>{
						this.data['tab_'+this.currentTab].data[key].cancelStatus = 1;
						this.msg(res.hint)
					})
				});
			},
			showConfirmDialog(content, callback) {
				uni.showModal({
					title: '提示',
					content: content,
					success: (res) => {
						if (res.confirm) {
							callback();
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-tab {
		padding-bottom: 10px;
		background: #FFFFFF;
	}

	.order-box {
		background: #FFFFFF;
		margin-top: 12px;
		padding: 12px;
		border-radius: 6px;
		font-size: 14px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.order-box .order-information {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-box .set-meal {
		display: flex;
		flex: 1;
		flex-direction: column;
		font-size: 14px;
		justify-content: space-evenly;
	}

	.order-box .dish-sum {
		font-size: 10px;
		color: #999999;
		display: flex;
		align-items: flex-end;
	}


	.order-box .order-revise {
		width: 84px;
		height: 28px;
		font-size: 10px;
	}
</style>